<template>
  <div id="comment" :style="`height:${commentListHeight}px;`">
    <top-header title="评论列表" :isRoute="isRoute" />
    <div class="comment-info">
      <textarea class="comment-content" v-model="content"></textarea>
      <mt-button type="danger" class="comment-btn" @click="addComment">发表评论</mt-button>
    </div>
    <hr />
    <!-- 评论列表 -->
    <h3 v-show="isEmpty" style="margin-top:14rem;">暂无任何评论，要不要先来一发？！</h3>
    <mt-loadmore
      ref="loadmore"
      :topMethod="topMethod"
      :bottomMethod="bottomMethod"
      :autoFill="autoFill"
      :bottomAllLoaded="bottomAllLoaded"
      style="margin-bottom:4rem;padding:0 1rem;margin-top:14rem;"
    >
      <div v-show="!isEmpty" v-for="item in commentList" :key="item.id">
        <p>{{item.user_name}}：</p>
        <p v-html="item.content"></p>
        <p class="comment-date">{{item.add_time | fromNow}}</p>
        <hr />
      </div>
      <div v-if="bottomAllLoaded" style="text-align:center;font-size:1rem;">亲~已经到底了哟~！^_^</div>
    </mt-loadmore>
  </div>
</template>
<script>
import "./index.less";
import { commentContent } from "../../utils";
import { userData, middleVue } from "../../services";
export default {
  data() {
    return {
      isRoute: true,
      content: "",
      commentList: [],
      pageindex: 1,
      autoFill: false,
      bottomAllLoaded: false,
      isEmpty: true,
      commentListHeight: 0
    };
  },
  methods: {
    addComment() {
      if (commentContent(this.content)) {
        this.$axios
          .post("add_comment", {
            user_name: userData.getUserData("zhouqing"),
            photoShareId: this.$route.query.photoShareId,
            goodsId: this.$route.query.goodsId,
            content: this.content
          })
          .then(res => {
            this.$toast({
              message: res.data.msg,
              position: "bottom"
            });
            this.content = "";
            // 查询评论列表数据
            this.$axios
              .get("getcomments", {
                params: {
                  pageindex: 1,
                  photoShareId: this.$route.query.photoShareId,
                  goodsId: this.$route.query.goodsId
                }
              })
              .then(res => {
                this.commentList = res.data.message;
                this.pageindex = 2;
                this.isEmpty = false;
              })
              .catch(err => console.log(err));
          })
          .catch(err => console.log(err));
      } else {
        this.$toast({
          message: "评论内容不能为空",
          position: "bottom"
        });
      }
    },
    topMethod() {
      this.$axios
        .get("getcomments", {
          params: {
            pageindex: 1,
            photoShareId: this.$route.query.photoShareId,
            goodsId: this.$route.query.goodsId
          }
        })
        .then(res => {
          this.commentList = res.data.message;
          this.pageindex = 2;
          this.$refs.loadmore.onTopLoaded();
          this.bottomAllLoaded = false;
        })
        .catch(err => console.log(err));
    },
    bottomMethod() {
      this.$axios
        .get("getcomments", {
          params: {
            pageindex: this.pageindex,
            photoShareId: this.$route.query.photoShareId,
            goodsId: this.$route.query.goodsId
          }
        })
        .then(res => {
          if (res.data.message.length <= 0) {
            this.bottomAllLoaded = true;
            this.$refs.loadmore.onBottomLoaded();
            return;
          }
          this.commentList = [...this.commentList, ...res.data.message];
          this.pageindex++;
          this.$refs.loadmore.onBottomLoaded();
        })
        .catch(err => console.log(err));
    }
  },
  props: ["tabBarRef"],
  created() {
    this.$axios
      .get("getcomments", {
        params: {
          pageindex: this.pageindex,
          photoShareId: this.$route.query.photoShareId,
          goodsId: this.$route.query.goodsId
        }
      })
      .then(res => {
        if (res.data.message.length <= 0) {
          return;
        }
        this.isEmpty = false;
        this.commentList = res.data.message;
        this.pageindex++;
      })
      .catch(err => console.log(err));
  },
  mounted() {
    console.log(document.documentElement.offsetHeight);
    console.log(this.$refs.loadmore.$el.offsetTop);
    console.log(this.tabBarRef.$el.offsetHeight);
    this.commentListHeight =
      document.documentElement.offsetHeight -
      this.$refs.loadmore.$el.offsetTop -
      this.tabBarRef.$el.offsetHeight;
  }
};
</script>
